<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="ok=!ok">点击</button>
    <h1 v-show="ok" >V-SHOW</h1>

    <h1 v-if="ok" >V-IF</h1>
    <h1 v-else-if="!ok" >V-IF</h1>
    <h1 v-else>V-ElSE</h1><br>
<!--    当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。-->
    <ul>
        <li v-for="user in users" v-if="ok">{{user }}</li>
    </ul>
    <br>
    <input v-on:click="but" value="点我" type="button">
    <h1 v-if="num >= 0.75">
        看到我啦？！if {{ num }}
    </h1>
    <h1 v-else-if="num > 0.5">
        看到我啦？！if 0.5 {{ num }}
    </h1>
    <h1 v-else-if="num > 0.25">
        看到我啦？！if 0.25  {{ num }}
    </h1>
    <h1 v-else>
        看到我啦？！else {{ num }}
    </h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    var vm = new Vue({
        el:"#app",     //  elment 缩写：元素  绑定的是id属性值为app的页面元素 ,对象作用范围是在当前绑定元素下
        data:{          //data属性，是一个数据对象 {}
            name:"hello app2",
            num: 1,
            ok:true,
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ],
        },
        methods:{
            but(){
                this.num=this.num*Math.random()
            },
        },
        watch:{
            num(newVal, oldVal){
                console.log(newVal, oldVal);
            }
        }


    })
</script>
</html>